<template>
  <div class="general-metric">
    <template v-if="show_type === 'metric'">
      <div
        v-for="(value, name, index) in total.metrics"
        :key="name"
        class="metric"
      >
        <span class="name">
          <span
            class="legend"
            :style="{ 'background-color': COLOR_PANEL[index] }"
            @click="changeShowType"
          />
          <span>{{ name.charAt(0).toUpperCase() + name.slice(1) }}</span>
        </span>
        <span class="value">
          <span>{{ formatValue(value) }}</span>
          <span class="percent-mark">%</span>
        </span>
      </div>
    </template>

    <template v-else>
      <div v-for="(value, name, index) in total.cnt" :key="name" class="metric">
        <span class="name">
          <span
            class="legend"
            :style="{ 'background-color': COLOR_PANEL[index] }"
            @click="changeShowType"
          />
          <span>{{ name.charAt(0).toUpperCase() + name.slice(1) }}</span>
        </span>
        <span class="value">
          <span>{{ value }}</span>
        </span>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { MetricResult } from '@/types/visualization/calculation'

import { COLOR_PANEL } from '@/components/vis-graph/figure/utils.ts'

import { ref } from 'vue'

const formatValue = (value: number | string): string => {
  if (typeof value === 'string') return value
  return (value * 100).toFixed(2)
}

// 显示指标或计数
const show_type = ref<'metric' | 'cnt'>('metric')

const changeShowType = () => {
  if (show_type.value === 'cnt') {
    show_type.value = 'metric'
  } else {
    show_type.value = 'cnt'
  }
}

defineProps({
  total: {
    type: Object as PropType<
      MetricResult | Record<string, Record<string, string>>
    >,
    required: true,
  },
})
</script>

<style lang="less" scoped>
.general-metric {
  padding: 0 2rem;
  display: flex;
  flex-direction: row;
}

.metric {
  margin: 0.5rem 0;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.name {
  font-family:
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 1.2rem;
  color: #999;

  display: flex;
  justify-content: center;
  align-items: center;

  & > .legend {
    margin-right: 0.3rem;
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.2rem;

    &:hover {
      cursor: pointer;
    }
  }
}

.value {
  font-size: 2.5rem;
}

.percent-mark {
  margin-left: 0.2rem;
  font-size: 1rem;
}
</style>
